<template>
  <div>
      <div style="background-color: white">
      <el-row>
          <el-col :span="3" :pull="0">
                <span style="color: #606266;font-size:25px;font-weight:bold" href="#">房屋收费</span>
            </el-col>
    </el-row>
    <el-row>
        <el-col :span="5">
        <a style="color: #606266" href="#">首页</a>
        <a style="color: #dcdfe6" href="#">/ 资产管理 </a>
        <a style="color: #dcdfe6" href="#">/ 楼栋信息</a></el-col
      >
    </el-row>
      </div>
    <hr />
    <el-row style="background-color: white">
      <el-col :span="2">查询条件</el-col>
    </el-row>
    <el-row style="background-color: white">
      <el-col :span="6"
        ><el-input
          v-model="xuanzeinfo.id"
          placeholder="请输入房屋门号"
          style="margin-left: 20px"
          clearable
        >
        </el-input>
      </el-col>

      <el-col :span="6"
        ><el-input
          v-model="xuanzeinfo.yezhuname"
          placeholder="请输入业主姓名"
          style="margin-left:38px"
          clearable
        >
        </el-input>
      </el-col>
      <el-col :span="6"
        ><el-select v-model="xuanzeinfo.loudongname" clearable placeholder="请选择楼栋">
    <el-option
      v-for="item in loudong"
      :key="item.value"
      :label="item.label"
      :value="item.name">
    </el-option>
  </el-select>
      </el-col>
      <el-col :span="6"><el-button @click="find()" style="margin-right:280px" type="primary" icon="el-icon-search">搜索</el-button></el-col>
    </el-row>
<hr />
    <el-row>
      <el-col :span="1">
        <el-button type="primary" @click="dialogFormVisibleinsert=true" style="margin-left: 1100px">批量创建<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-col>
    </el-row>
    
    <template>
      <el-table :data="pagination.records" style="width: 100%">
        <el-table-column sortable prop="houseId" label="房屋编号" width="150">
        </el-table-column>
          <el-table-column prop="name" label="房屋门号" width="150">
        </el-table-column>
        <el-table-column prop="building.name" label="楼栋名称" width="150">
        </el-table-column>
        <el-table-column prop="harea" label="建筑面积" width="150">
        </el-table-column>
        <el-table-column prop="userinfo.username" label="业主姓名" width="150">
        </el-table-column>
        <el-table-column prop="hcondition" label="状态" width="180">
        </el-table-column>
        <el-table-column label="操作" align=center width="280"> 
            <template slot-scope="scope">
         <el-button size="medium" @click="xuanze(scope.row)" round>欠费缴费</el-button>
          <el-button size="medium" @click="demo2(scope.row)" round>查看费用</el-button>
        </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>
    </template>

    <el-dialog :append-to-body="true" title="修改信息" :visible.sync="dialogFormVisibleupdate">
      <el-form>
        <el-form-item label="房屋编号" label-width="120px">
          <el-input
          placeholder="房屋编号不可修改"
          v-model="updinfo.houseId"
           autocomplete="off"
          :disabled="true">
        </el-input>
        </el-form-item>
        <el-form-item label="房屋门号" label-width="120px">
          <el-input
          placeholder="必填，请填写房屋门号"
          v-model="updinfo.name"
           autocomplete="off"
           >
        </el-input>
        </el-form-item>

        <el-form-item label="楼栋名称" label-width="120px">
          <el-select v-model="updinfo.building.name" clearable placeholder="请选择楼栋">
    <el-option
      v-for="item in loudong"
      :key="item.value"
      :label="item.label"
      :value="item.name">
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="房屋状态" label-width="120px">
          <el-input
            v-model="updinfo.harea"
            placeholder="必填，请填写建筑面积"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
        <el-button type="primary" @click="upd2()">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog :append-to-body="true" title="批量创建" :visible.sync="dialogFormVisibleinsert">
        <el-form>
        <el-form-item label="选择楼栋：" label-width="120px">
          <el-select v-model="addinfo.lname" placeholder="必填，请选择楼栋名称" autocomplete="off">
              <el-option value="全部">
              </el-option>
            <el-option
      v-for="item in loudong"
      :key="item.value"
      :label="item.label"
      :value="item.name">
    </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收费项目：" label-width="120px">
          <el-select v-model="addinfo.pname" placeholder="必填，请选择收费项目" autocomplete="off">
            <el-option
      v-for="item in shoufeixiang"
      :key="item.value"
      :label="item.label"
      :value="item.pname">
    </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房屋状态：" label-width="120px">
            <el-radio v-model="addinfo.radio" label="已入住">已入住</el-radio>
             <el-radio v-model="addinfo.radio" label="未入住">未入住</el-radio>
              <el-radio v-model="addinfo.radio" label="未销售">未销售</el-radio>
        </el-form-item>
        <el-form-item label="计费起始时间：" label-width="120px">
            <el-date-picker
      v-model="addinfo.date"
      type="datetime"
      placeholder="选择日期时间"
      default-time="12:00:00">
    </el-date-picker>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="add()">保存</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
data(){
  return{
    shoufeixiang:{},
    addinfo:{},
    dialogFormVisibleupdate:false,
    dialogFormVisibleinsert:false,
    pagination:{},
    loudong:{},
    updinfo:{building:{}},
    xuanzeinfo:{
      id:"",
      loudongname:"",
      yezhuname:""
    }
  };
},
methods: {
  xuanze(row){
        this.$store.dispatch("changedingdan_houseid",row.houseId);
        this.$router.push("/feiyong/jiaofei");
  },
    demo2(row){
        this.$store.dispatch("changedingdan_houseid",row.houseId);
        this.$router.push("/feiyong/dingdan");
    },
    demo(){
      let url="shoufei/select";
      this.$axios.post(url).then(resp=>{this.shoufeixiang=resp.data.result;console.log(this.shoufeixiang);})
    },
    add(){
      let url="shoufei/add2";
      this.$axios.post(url,this.addinfo).then(resp=>{if(resp.data.success){this.dialogFormVisibleinsert=false}});
    },
    upd2(){
      let url="fangwu/upd";
      let param={hname:this.updinfo.name,houseId:this.updinfo.houseId,hArea:this.updinfo.harea,lname:this.updinfo.building.name};
      this.$axios.post(url,param).then(resp=>{if(resp.data.success){this.dialogFormVisibleupdate=false}})
    },
    upd(row){
      this.dialogFormVisibleupdate=true;
      this.updinfo=row;
    },
   handleSizeChange(pageSize) {
      this.find(this.pagination.current, pageSize);
    },
    //当前页面发生改变，查询
    handleCurrentChange(page) {
      console.log(page)
      this.find(page, this.pagination.size);
    },
  find(page = 1, pageSize = 5){
    let url="fangwu/Info";
    let params={page:page,pageSize:pageSize,id:this.xuanzeinfo.id,lname:this.xuanzeinfo.loudongname,username:this.xuanzeinfo.yezhuname};
    this.$axios.post(url,params).then(resp=>{this.pagination = resp.data.result;});
  },
  find2(){
    let url="fangwu/loudong";
    this.$axios.post(url).then(resp=>{this.loudong=resp.data.result;});
  }
},
mounted(){
  this.find();
  this.find2();
  this.demo();
}
}
</script>

<style>

</style>